<!DOCTYPE html>
<html>
<head>
    <!--up!xxx, 向上冒泡
down!xxx, 向下捕获
all!xxx, 全局广播-->
    <title>by 司徒正美</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="../avalon1.4/avalon.js"></script>
    <script>
        avalon.define("ancestor", function (vm) {
            vm.aaa = '1111111111'
            vm.$watch("aaa", function (v) {
                avalon.log(v)
                avalon.log("ancestor.aaa事件被触发了")
            })
            vm.click = function () {
                avalon.log("向下广播")
                vm.$fire("down!aaa", "down")
            }
        })
        avalon.define("parent", function (vm) {
            vm.text = "222222222"
            vm.aaa = '3333333333'
            vm.$watch("aaa", function (v) {
                avalon.log(v)
                avalon.log("parent.aaa事件被触发了")
            })
            vm.click = function () {
                console.log("全局扩播")
                vm.$fire("all!aaa", "all")
            }
        })
        avalon.define("son", function (vm) {
            vm.$watch("aaa", function (v) {
                avalon.log(v)
                avalon.log("son.aaa事件被触发了")
            })
            vm.click = function () {
                console.log("向上冒泡")
                vm.$fire("up!aaa", "up")
            }
        })
    </script>
</head>
<body class="ms-controller" ms-controller="ancestor">
<h3>avalon vm.$fire的升级版 </h3>
<button type="button" ms-click="click">
    ancestor dowm
</button>
<div ms-controller="parent">
    <button type="button" ms-click="click">parent all</button>
    <div ms-controller="son">
        <button type="button" ms-click="click">
            son up
        </button>
    </div>
</div>
</body>
</html>